<div class="dialog_room">
  <div class="title">
    <h4>Select Input Data</h4>
    <button class="btn_add_data" mat-stroked-button [matMenuTriggerFor]="menu">add data</button>
    <mat-menu #menu="matMenu">
      <label mat-menu-item class="upload-button" (click)="fromLocal()">
        <!-- <input type="file" ngFileSelect accept="application/zip" #fileInput
          (uploadOutput)="onUploadOutput($event,fileInput)" /> -->
        <span style="margin-bottom:25px">From Local Data</span>
      </label>
      <!-- <button mat-menu-item (click)="fromLayers()">From Layer List</button> -->
      <button mat-menu-item (click)="fromUser()">From User Storage</button>
      <button mat-menu-item (click)="fromDataContainer()">Search From Data Container</button>
    </mat-menu>
  </div>

  <div class="data_room">
    <div class="data_res" scrollbar>
      <div class="data_res_control" *ngIf="dataSources==4">
        <div class="search">
          <mat-form-field class="example-form-field">
            <input matInput type="text" placeholder="Search from remote" [(ngModel)]="searchContent">
            <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="searchContent=''">
              <mat-icon>close</mat-icon>
            </button>
          </mat-form-field>
          <button mat-button mat-icon-button (click)="search()">
            <mat-icon _ngcontent-c5="" class="mat-icon material-icons" role="img" style="margin-top: 3px;"
              aria-hidden="true">search</mat-icon>
          </button>
        </div>
      </div>
      <!-- <nz-transfer *ngIf="dataSources==2" [nzDataSource]="list" [nzTitles]="['Source', 'Target']" (nzSelectChange)="select($event)"
            (nzChange)="change($event)"></nz-transfer> -->
      <div class="user_datas_container">
        <div class="item" *ngFor="let item of dataResources" title="{{item.fileName}}" (click)="pickData(item)">
          <img [ngClass]="setClasses(item)" [src]="getSrc(item)" alt="">
          <span class="dataName">{{item.fileName}}</span>
          <div class="cover">
            <a>
              pick
            </a>
          </div>
        </div>
        <mat-paginator *ngIf="dataLength>12" [length]="dataLength" [pageSizeOptions]="[12,24,36]" [pageSize]="pageSize"
          [pageIndex]='pageIndex' (page)="onPageChange($event)">
        </mat-paginator>
      </div>
    </div>
    <hr>


    <div class="picked" scrollbar>
      <div class="item" *ngFor="let item of dataPicked" title="{{item.fileName}}" (click)="discard(item)">
        <img [ngClass]="setClasses(item)" [src]="getSrc(item)" alt="">
        <span class="dataName">{{item.fileName}}</span>
        <div class="cover">
          <a>
            discard
          </a>
        </div>
      </div>
    </div>
    <div class="upload_room" *ngIf="this.dataPicked.length>0">
      <button class="btn btn-info" [mat-dialog-close]="this.inputDataIdList" (click)="upload()">upload</button>
    </div>

  </div>
</div>
